<template>
<div class="container">
  <h1>HOTEL</h1>
  <div class="login">
    <div class="title">酒店后台</div>
    <div class="item">
      <span>用户名</span>
      <input v-model:value="loginEntity.adminCode" type="text">
    </div>
    <div class="item">
      <span>密码</span>
      <input type="password" v-model:value="loginEntity.adminPassword">
    </div>
    <button class="login-btn" @click="login">登录</button>
  </div>
</div>
</template>

<script>
import {AdminLogin} from "@/api";

export default {
  name: "Login",
  data(){
    return{
      loginEntity:{
        adminCode: '',
        adminPassword: ''
      }
    }
  },
  methods:{
    login(){
      // const adminCode = this.loginEntity.adminCode
      // const adminPassword = this.loginEntity.adminPassword
      AdminLogin({
        adminCode: this.loginEntity.adminCode,
        adminPassword: this.loginEntity.adminPassword
      }).then(res => {
        console.log(res)
        this.$router.push({
          path: '/admin/manage/room'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
  .container{
    color: white;
    margin-top: 80px;
    .login{
      margin: auto;
      width: 320px;
      min-width: 320px;
      border: 1px solid darkgrey;
      border-radius: 4px;
      background: darkgrey;
      padding: 16px;
      box-sizing: border-box;
      .item{
        margin-top: 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        span{
          width: 20%;
          font-weight: 600;
        }
        input{
          width: 80%;
          box-sizing: border-box;
          height: 32px;
          border-radius: 4px;
          border: 1px solid white;
        }
      }
      .login-btn:hover{
        background: #9090f5;
        color: white;
      }
      .login-btn:active{
        background: #7979f6;
        color: white;
      }
      .login-btn{
        background: #e5e5f5;
        cursor: pointer;
        color: #4444fa;
        border-radius: 4px;
        border: 1px solid #adadf3;
        padding: 4px;
        width: 128px;
        height: 32px;
      }
    }
  }
</style>